<template>
  <div class="ordermap-containter">
    <div class="ordermap-fifter">
      <el-form :inline="true" :model="ordermapform" class="demo-form-inline">
        <el-form-item label="城市">
          <el-select v-model="cityName" size="small" placeholder="请选择城市" @change="handleCityId">
            <el-option v-for="item in cityList" :key="item.id" size="small" :label="item.deptName" :value="{label:item.deptName,value:item.id}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期">
          <el-select v-model="ordermapform.timeType" size="small" clearable style='width:100px;margin-right:10px;'>
            <el-option v-for="item in TimesList" :key="item.value" :label="item.value" :value="item.label">
            </el-option>
          </el-select>
          <el-date-picker size="small" v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            :clearable='false' end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Abnormalform,Launchdate)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="ordermap" :style="{'height':curHeight+'px'}">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" ref="map" class="amap-demo">
        <el-amap-marker v-if="markers&&markers.length>0" v-for="(marker,index) in markers" :key="index" :position="marker.position"></el-amap-marker>
      </el-amap>
    </div>
  </div>
</template>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="//a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<script>
  import {
    deptdepts,
    // getExcelShowData
  } from "@/api/statistics"
  export default {
    data() {
      return {
        cityList: [],
        ordermapform: {
          city: '',
          timeType: 2,

        },
        TimesList: [{
          value: '下单时间',
          label: 1
        }, {
          value: '配送时间',
          label: 2
        }],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
        curHeight: 0,
        cityName: '',
        // 地图数据--------------------------------------------------------------------------------
        zoom: 18,
        center: [121.5273285, 31.21515044],
        markers: [],
        maplist: [{
            "address_x": 120.16753249719315,
            "address_y": 30.29759278109433
          },
          {
            "address_x": 120.1236978658706,
            "address_y": 30.343166568913336
          },
          {
            "address_x": 120.19498895640325,
            "address_y": 30.179856076879005
          },
          {
            "address_x": 120.05604866092963,
            "address_y": 30.28436333368732
          },
          {
            "address_x": 120.265021,
            "address_y": 30.320335
          },
          {
            "address_x": 120.097052,
            "address_y": 30.310682
          },
          {
            "address_x": 120.276703,
            "address_y": 30.298885
          },
          {
            "address_x": 120.263685,
            "address_y": 30.305375
          },
          {
            "address_x": 120.191423,
            "address_y": 30.269433
          },
          {
            "address_x": 120.165143,
            "address_y": 30.279966
          },
          {
            "address_x": 120.20417407209786,
            "address_y": 30.335515850674753
          },
          {
            "address_x": 120.24798,
            "address_y": 30.14152204
          },
          {
            "address_x": 120.15039907930854,
            "address_y": 30.326393675861414
          },
          {
            "address_x": 114.40213285579958,
            "address_y": 23.067118879730916
          },
          {
            "address_x": 114.41611898917198,
            "address_y": 23.06723132322123
          },
          {
            "address_x": 114.40815361476797,
            "address_y": 23.09010263885681
          },
          {
            "address_x": 114.326118,
            "address_y": 23.004072
          },
          {
            "address_x": 114.421175,
            "address_y": 23.042245
          },
          {
            "address_x": 114.35620367349716,
            "address_y": 23.027049232655735
          },
          {
            "address_x": 114.455272710816,
            "address_y": 23.10401484942812
          },
          {
            "address_x": 114.480045,
            "address_y": 22.760885
          },
          {
            "address_x": 114.42142630498414,
            "address_y": 23.052145945811205
          },
          {
            "address_x": 114.442988,
            "address_y": 23.075213
          },
          {
            "address_x": 114.421203,
            "address_y": 23.046128
          },
          {
            "address_x": 114.448989,
            "address_y": 23.089469
          },
          {
            "address_x": 114.401484,
            "address_y": 23.076156
          },
          {
            "address_x": 114.437192,
            "address_y": 22.805643
          },
          {
            "address_x": 114.424741,
            "address_y": 23.070817
          },
          {
            "address_x": 114.316303,
            "address_y": 23.164233
          },
        

        ]
      }
    },
    created() {
      this.beforeMount(180);
    },
    mounted() {
      this.beforeMount(180);
      this.citydataList();

    },
    methods: {
      //获取屏幕
      beforeMount(height) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - height; //减去页面上固定高度height
      },
      citydataList() {
        deptdepts("").then(response => {
          this.cityList = response.data.data;
          this.ordermapform.city = response.data.data[0].id;
          this.cityName = response.data.data[0].deptName;
          this.getMapaddress(this.cityName);
        });
      },
      handleCityId(data) {
        this.ordermapform.city = data.value;
        this.cityName = data.label;
        this.getMapaddress(this.cityName);

      },
      getdeptIdsIds(data) {
        this.deptIdsIdslist = data;
      },
      // 查询
      handleFilter(times) {

      },
      //根据城市获取地图位置
      getMapaddress(name) {
        var MSearch;
        var mapObj = new AMap.Map("amapDemo", {
          resizeEnable: true,
          center: [116.397428, 39.90923], //地图中心点
          zoom: 10 //地图显示的缩放级别
        });
        mapObj.plugin(
          ["AMap.PlaceSearch"],
          () => {
            // mapObj.addControl(new AMap.ToolBar())
            // mapObj.addControl(new AMap.Scale())
            MSearch = new AMap.PlaceSearch({
              //构造地点查询类
              city: '北京市' //城市
            });
            AMap.event.addListener(MSearch, "complete", this.keywordSearch_CallBack) //返回地点查询结果
            MSearch.search(name); //关键字查询
          }
        );
      },
      keywordSearch_CallBack(data) {
        var mapObj = new AMap.Map("amapDemo", {
          resizeEnable: true
        });
        var poiArr = data.poiList.pois
        var resultCount = poiArr.length
        this.poiArr = poiArr; //左边要渲染的数据
        mapObj.setFitView()
        mapObj.setZoomAndCenter(14, [poiArr[0].location.lng, poiArr[0].location.lat]);
        this.newcenter = [poiArr[0].location.lng, poiArr[0].location.lat];
        this.ordershowMap(mapObj);
      },
      //热力图
      ordershowMap(map) {
        var lst = eval(this.maplist);
        if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
          var points = []; // 添加海量点数据
          for (var i = 0; i < lst.length; i++) {
            let temp = {
              lnglat: [lst[i].address_x, lst[i].address_y], //点标记位置
            }
            points.push(temp);
          }

          var style = [{
            url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          }, {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
            anchor: new AMap.Pixel(4, 4),
            size: new AMap.Size(7, 7)
          }, {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
            anchor: new AMap.Pixel(3, 3),
            size: new AMap.Size(5, 5)
          }];

          var mass = new AMap.MassMarks(points, {
            opacity: 0.8,
            zIndex: 111,
            cursor: 'pointer',
            style: style
          });

          var marker = new AMap.Marker({
            content: ' ',
            map: map
          });

          mass.on('mouseover', function(e) {

            marker.setPosition(e.data.lnglat);
            marker.setLabel({
              content: e.data.name
            })
          });

          mass.setMap(map);

        } else {
          alert('请在chrome、safari、IE8+以上浏览器查看本示例');
        }

      }
    }

  }
</script>

<style lang="scss" scoped>
  .ordermap-containter {
    padding: 10px;

    .ordermap-fifter {
      .el-form-item{
        margin-bottom: 10px;
      }
    }

  }
</style>
